import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
import { Button, Avatar, Card, Drawer, Breadcrumb } from 'antd';
import { CloudUploadOutlined, EditOutlined, LineChartOutlined, LoadingOutlined } from '@ant-design/icons';


import { qiniuGetUrl, SharedObject } from '../../../services';
import { ResultItemDetail } from './result-detail';

export interface ResourceListItemProps {
    style?: CSSProperties;
    item: SharedObject;
    onDoubleClick?: (item: SharedObject) => Promise<void>;
    onClick?: (item: SharedObject, action?: string) => Promise<void>;
}

const ResourceListItem: React.FC<ResourceListItemProps> = (props: any) => {

    const [url, setUrl] = useState<string | null>(null);

    useEffect(() => {
        //
        qiniuGetUrl([props.item.icon]).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setUrl(url[0]);
            }
        });
    }, [props.item.icon]);

    return (
        <ItemContainer
            style={props.style}
            onDoubleClick={async () => {
                props.onDoubleClick && await props.onDoubleClick(props.item)
            }}
            onClick={async () => {
                props.onClick && await props.onClick(props.item)
            }}
        >
            {
                !url && <IconContainer><LoadingOutlined /></IconContainer>
            }
            {
                url && <Icon src={url} />
            }
            <ItemCenter>
                <Title>{props.item.name}</Title>
                <Description>{props.item.description}</Description>
            </ItemCenter>
        </ItemContainer>
    );
}


export const SearchResultList = (props: { data: Array<SharedObject> }) => {

    const [detailOpen, setDetailOpen] = useState<boolean>(false);

    const [selected, setSelected] = useState<SharedObject | null>(null);

    return (
        <Container>
            {
                props.data && props.data.map((item, index) => {
                    return (
                        <ResourceListItem key={index} item={item}
                            style={{
                                width: '260px',
                                height: '90px'
                            }}
                            onClick={async (item) => {
                                setSelected(item);
                                setDetailOpen(true);
                            }}
                        >
                        </ResourceListItem>
                    );
                })
            }
            <Drawer
                title="详情"
                onClose={() => {
                    setDetailOpen(false);
                }}
                width={'calc(100% - 220px)'}
                destroyOnClose={true}
                open={detailOpen}>
                <ResultItemDetail item={selected}></ResultItemDetail>
            </Drawer>
        </Container>
    );
}

export default SearchResultList;

const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    overflow: auto;
    padding: 10px;
    gap: 10px;
    background-color: #DEDEDE;
`;

const ItemContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #FFFFFF;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    padding: 10px;
`;

const IconContainer = styled.div`
    border-radius: 6px;
    width: 60px;
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #ff7875;
`;

const Icon = styled.img`
    border-radius: 6px;
    width: 60px;
    height:60px;
`;

const ItemCenter = styled.div`
    flex:1;
    padding: 0 6px;
`;

const Title = styled.div`
    font-size: 16px;
    font-weight: bolder;
    line-height: 26px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical; 
`;

const Description = styled.div`
    font-size: 10px;
    color: #999999;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical; 
`;

const Buttons = styled.div`
    width: 65px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
`;